<template>
	<!-- 类目热销榜 -->
	<div class="category">
		<h4 class="text">{{ categoryHotSell.title }}</h4>

		<div class="goods">
			<div class="top">
				<div class="topItem" v-for="(item, index) in categoryHotSellTop" :key="index" :class="index === 0 ? 'bg1':'bg2'">
					<div class="name">{{ item.categoryName }}</div>
					<img :src="item.picUrl" alt="" />
				</div>
			</div>

			<div class="bottom">
				<div class="bottomItem" v-for="(item, index) in categoryHotSellBottom" :key="index">
					<div class="name">{{ item.categoryName }}</div>
					<img :src="item.picUrl" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'CategoryHotSell',
});
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { reqBannerList } from '@/api/homeApi';

let categoryHotSell = ref<any>({});
let categoryHotSellTop = ref<any>([]);
let categoryHotSellBottom = ref<any>([]);

let getSwierList = async () => {
	let {data} = await reqBannerList();
	categoryHotSell.value = data.categoryHotSellModule;
	categoryHotSellTop.value = categoryHotSell.value.categoryList.slice(0, 2);
	categoryHotSellBottom.value = categoryHotSell.value.categoryList.slice(2);
};

onMounted(() => {
	getSwierList();
});
</script>

<style scoped lang="scss">
.category {
	margin-top: 50px;
	padding: 0 10px;

	.text {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.goods {
		display: flex;
		flex-direction: column;

		.name {
			font-size: 12px;
			font-weight: 100;
		}
		.top {
			// background-color: coral;
			display: flex;
			justify-content: space-around;

			.topItem {
				background-color: skyblue;
				width: 49%;
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					width: 100px;
					height: 100px;
				}
			}
			.bg1{
				background-color: #f9f3e4;
			}
			.bg2{
				background-color: #ebeff6;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-around;
			margin-top: 5px;
			.bottomItem {
				background-color: #f5f5f5;
				width: 24%;
				text-align: center;
				padding-top: 10px;
				img {
					width: 60px;
					height: 60px;
				}
			}
		}
	}
}
</style>
